const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CSSMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  mode: "development",//指定打包模式为开发模式
  devtool: "source-map",//指定sourcemap的生成方式
  optimization:{
    minimize:false,
    minimizer:[
      new TerserPlugin(),
      new CSSMinimizerWebpackPlugin()
    ]
  },
  entry: {
    main: "./src/index.js"
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js"
  },
  module: {//配置模块的加载规则
    rules: [//配置不同的文件的加载规则 
      {
        test:/\.js$/,//针对项目中的JS
        exclude:/node_modules/,//忽略或者说不处理node_modules中的第3方模块
        use:{//如果你只使用一个loader,放置一个对象也是可以的
          loader:"babel-loader",
          options:{
            //预设里有很多插件，每个可以检测一种新的语法，然后把新语转成老语法
            presets:[[
              "@babel/preset-env",
              {//按需导入腻子
                "useBuiltIns":"usage",
                "corejs":3//指定提供腻子的库的版本号
              }
            ]],//ES6=>ES5
            plugins:[//proposal-optional-chaining
              "@babel/plugin-proposal-optional-chaining",
              "@babel/plugin-proposal-class-properties"
            ]
          }
        }
      },
      {
        test: /\.css$/,//如果要加载的文件是以.css结尾的话
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader:"postcss-loader",//CSS预处理器
            options:{
              postcssOptions:{
                plugins:[//配置postcss插件数组
                  [
                    "autoprefixer",//自动添加厂商前缀
                    {
                      //重写要兼容的浏览器版本
                      overrideBrowserslist:[
                        "> 0.1%",//市场占有率大于1%
                        "last 1000 versions"//每个浏览器最近的2个版本
                      ]
                    }
                  ]
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.less$/,//如果要加载的文件是以.less结尾的话
        use: [
          MiniCssExtractPlugin.loader,//返回JS代码，负责创建style标签，内容就是CSS源代码
          "css-loader",//调有和css-loader处理css源代码中的url图片路径
          //{},
          "less-loader"//调用less-loader把less源代码转成css源代码
        ]
      },
      {
        test: /\.scss$/,//如果要加载的文件是以.scss结尾的话
        use: [
          MiniCssExtractPlugin.loader,//返回JS代码，负责创建style标签，内容就是CSS源代码
          "css-loader",//调用css-loader处理css源代码中的url图片路径
          //{},
          "sass-loader"//调用sass-loader把sass源代码转成css源代码
        ]
      },
      {
        test:/\.(jpg)$/,
        type:"asset/resource",
      },
      {
        test:/\.(svg)$/,
        type:"asset/inline"
      },
      {
        test:/\.(png)$/,
        type:"asset",
        parser: {
          //如果大小是小于4K的走内联，如果是大于4K的走外联
          dataUrlCondition: {
            maxSize: 16 * 1024 // 4kb
          }
        }
      },
      {
        test:/\.txt$/,
        type:"asset/source"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",//模板文件的路径
      filename: "index.html"//输出的文件名,打包前是没有的，打包之后才会生成
    }),
    new MiniCssExtractPlugin({
      //生成文件名对应名称模板 代码块的名称
      filename:"[name].css"
    }),//也会把生成的main.css文件插入html里
    new EslintWebpackPlugin({
      extensions:[".js"],//代码检查文件的扩展名
      fix:true
    })
  ],
  devServer: {
    port: 8080,//指定开发环境器的端口号
    static: {//如果你想修改静态文件根目录的路径，可以通过static配置项来配置，如果不配置的话就是public
      directory: path.join(__dirname, "static")
    },
    compress: false,
    proxy:{
      "/api":"http://localhost:3000"
    }
  }
};